<template>
  <div>
    <div class="kaitou">
      <div class="header">
        <div class="same">
          <div class="hed">
            <div class="i">
              <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
              <i class="iconfont icon-home" @click="$router.replace('/')"></i>
            </div>
            <p>店铺详情</p>
          </div>
        </div>
      </div>
      <div class="biaotou">
        <img
          src="https://tse1-mm.cn.bing.net/th/id/R-C.cfe2e230cce4da81ae9f9ca29fe58f7b?rik=mlZU9FRC9oOjVw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190614%2f12%2f1560486839-SDgqaGAObk.jpeg&ehk=O12ta2gxX4%2bW8KfStCEM5srRicvHzGSfvRR0xtWk0MU%3d&risl=&pid=ImgRaw&r=0"
          alt=""
          class="img1"
        />
        <!-- <img :src="item.url" alt="" class="img1" /> -->
        <h3 class="dianming">{{ business.shop }}</h3>
        <dl>
          <dt>配送费¥{{ business.meals }}元起</dt>
          <dd>起送价¥{{ business.delivery }}</dd>
        </dl>
      </div>

      <div class="sousou">
        <input type="text" placeholder="搜索同城商品" />
      </div>
      <div class="gekai"></div>
    </div>

    <div class="left">
      <div class="lfd">
        <ul
          v-for="item in business.options"
          :key="item.id"
          :class="{ active: active == item.name }"
        >
               
          <li @click.self="change(item.name)" class="name">
                    {{ item.name }}          <List
              v-show="active == item.name"
              @abc="addList"
              :data="item.smalls"
              @click="index = name"
            />
          </li>
             
        </ul>
      </div>
    </div>
    <div class="wenzi">
      <p>{{ al }}</p>
    </div>
    <div class="right">
      <el-row v-for="item1 in business.options" :key="item1.id">
        <el-col :span="24">
          <el-row v-for="item2 in item1.smalls" :key="item2.id">
            <el-col :span="24">
              <div v-for="item3 in item2.shops" :key="item3.id">
                <div class="shangpin" v-show="al == item2.activity">
                  <img
                    src="https://tse1-mm.cn.bing.net/th/id/R-C.cfe2e230cce4da81ae9f9ca29fe58f7b?rik=mlZU9FRC9oOjVw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190614%2f12%2f1560486839-SDgqaGAObk.jpeg&ehk=O12ta2gxX4%2bW8KfStCEM5srRicvHzGSfvRR0xtWk0MU%3d&risl=&pid=ImgRaw&r=0"
                    alt=""
                    class="img3"
                  />
                  <span> {{ item3.shopName }}</span>
                  <h5 class="qianqian">¥{{ item3.shopPrice }}</h5>
                  <i class="el-icon-circle-plus"></i>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="gou">
      <transition name="fade">
        <div class="gouwu" v-show="isShow"></div>
      </transition>
      <div class="dianhua">
        <i class="el-icon-phone-outline"></i>
        <h6>联系商家</h6>
      </div>
      <div class="quan1" @click="isShow = !isShow">
        <div class="quan2">
          <i class="el-icon-s-claim"></i>
        </div>
      </div>
      <dl>
        <dt>另需配送费¥{{ 1 }}</dt>
      </dl>
      <div class="jiesuan">
        <dd>{{ 41 }}元起送</dd>
      </div>
    </div>
  </div>
</template>
<script>
import List from "./list.vue";
import { detailed } from "@/api";
export default {
  components: {
    List,
  },
  mounted() {},
  created() {
    this.detailed();
  },
  methods: {
    addList(al) {
      this.al = al;
    },
    change(i) {
      this.active = i;
      // this.active = ((i) => i != i);
    },
    detailed() {
      let id = this.$route.params.id;
      detailed({ id }).then((det) => {
        // console.log(det.data.data[0], "aaaaa`");
        this.business = det.data.data[0];
      });
    },
  },
  data() {
    return {
      al: "满减活动",
      active: "活动商品",
      isShow: false,
      business: {},
      styleobj: {},
    };
  },
};
</script>
<style scoped lang="scss">
.kaitou {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
.header {
  width: 100%;
  height: 8vh;
  background: #fff;

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    background: #fff;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.biaotou {
  width: 100%;
  height: 14.5vh;
  background-image: linear-gradient(120deg, #ff518b 0%, #ff7417 100%);
  .img1 {
    width: 10vh;
    height: 10vh;
    float: left;
    margin-top: 2vh;
    margin-left: 2vh;
  }
  h3 {
    margin-left: 14.5vh;
    padding-top: 3.5vh;
    font-size: 16px;
    color: #fff;
  }
  dl {
    font-size: 10px;
  }
  dt {
    float: left;
    margin-left: 2.5vh;
    margin-top: 1vh;
    color: #fff;
  }
  dd {
    float: left;
    margin-left: 1.5vh;
    margin-top: 1vh;
    color: #fff;
  }
}
.img1 {
  width: 10vh;
  height: 10vh;
  float: left;
  margin-top: 2vh;
  margin-left: 2vh;
}
h3 {
  margin-left: 14.5vh;
  padding-top: 3.5vh;
  font-size: 16px;
  color: #fff;
}
dl {
  font-size: 10px;
}
dt {
  float: left;
  margin-left: 2.5vh;
  margin-top: 1vh;
  color: #fff;
}
dd {
  float: left;
  margin-left: 1.5vh;
  margin-top: 1vh;
  color: #fff;
}
.gekai {
  width: 100%;
  height: 1vh;
  background-image: linear-gradient(180deg, #e0e0e0 0%, #ffffff 100%);
}
.sousou {
  width: 100%;
  background: rgb(255, 255, 255);
  height: 7.5vh;
  input {
    width: 95%;
    height: 5vh;
    border-radius: 20px;
    text-indent: 2em;
    outline: none;
    border: 0;
    margin-top: 1.5vh;
    margin-left: 3%;
    background: #ececec;
  }
  input:hover {
    border: 1px solid orange;
  }
}

.left {
  width: 30%;
  height: 100vh;
  background: rgb(233, 233, 233);
  float: left;
  // height: auto;
  margin-top: 31vh;
  position: fixed;
  overflow-x: hidden;

  .lfd {
    height: 150vh;
    ul {
      background: #f0f0f0;
      width: 100%;
      padding-top: 1.5vh;
    }
    .name {
      color: #333333;
      // background: #ff518b;
      margin-left: -2vh;
      line-height: 3.5vh;
      margin-top: 1.4vh;
    }
    ul.active {
      background: rgb(168, 243, 239);
    }
  }
}
.wenzi {
  width: 70%;
  background: rgb(255, 255, 255);
  border-bottom: 1.5px solid #ececec;
  // background-image: linear-gradient(120deg, #999999 0%, #ece2e2 100%);
  height: 5vh;
  float: right;
  position: fixed;
  right: 0;
  z-index: 3;
  margin-top: 31vh;
  p{
    width: 15vh;
    height: 4.2vh;
    background: #faeadd;
    border-radius: 50vh ;
    text-align: center;
    margin-left: 10vh;
    // justify-content: center;
    padding-top: 0.8vh;
  }
}
.right {
  width: 70%;
  height: 100vh;
  float: right;
  margin-top: 36vh;
  h4 {
    margin-top: 1vh;
    margin-left: 1vh;
  }
  .shangpin {
    width: 100%;
    height: 20vh;
    background: #ffffff;
    overflow: hidden;
    .img3 {
      width: 9vh;
      height: 9vh;
      margin-top: 5vh;
      margin-left: 1vh;
      float: left;
    }
    span {
      width: 25vh;
      float: left;
      margin-top: 4vh;
      margin-left: 2vh;
    }
    .qianqian {
      font-size: 17px;
      color: red;
      float: left;
      margin-left: 3vh;
      margin-top: 4vh;
    }
    .el-icon-circle-plus {
      font-size: 25px;
      color: #ff7417;
      float: right;
      margin-right: 3vh;
      margin-top: 5vh;
    }
  }
}

.gou {
  width: 100%;
  height: 8vh;
  border-radius: 50vh;
  margin-top: 1.5vh;
  background: #333333;
  position: fixed;
  bottom: 2vh;
  z-index: 5;

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .gouwu {
    width: 100%;
    height: 50vh;
    border-radius: 5vh 5vh 0vh 0vh;
    background: #ffffff;
    position: absolute;
    bottom: 8vh;
    z-index: -1;
    .danru {
      background: #ff0000;
    }
  }
  .dianhua {
    width: 11vh;
    height: 8vh;
    background: #333333;
    border-radius: 50vh 0 0 50vh;
    border-right: 0.4vh solid #fff;
    float: left;

    i {
      color: rgb(255, 255, 255);
      margin-left: 5vh;
      font-size: 20px;
      margin-top: 1.5vh;
    }

    h6 {
      color: rgb(255, 255, 255);
      margin-top: 0.1vh;
      text-align: center;
    }
  }

  .quan1 {
    height: 9vh;
    width: 9vh;
    background: rgb(83, 83, 83);
    margin-top: -2.5vh;
    border-radius: 50vh;
    margin-left: 13vh;

    .quan2 {
      height: 7vh;
      width: 7vh;
      border-radius: 50vh;
      margin-top: -1vh;
    }
    i {
      font-size: 5vh;
      margin-top: 2vh;
      margin-left: 2vh;
      color: rgb(172, 172, 172);
    }
  }
  dl {
    dt {
      margin-top: -4vh;
      margin-left: 13vh;
      font-size: 14px;
      color: rgb(202, 202, 202);
    }
  }
  .jiesuan {
    width: 12vh;
    height: 8vh;
    float: right;
    margin-top: -6.5vh;

    background: #4b4b4b;
    border-radius: 0 50vh 50vh 0;
    dd {
      margin-left: 1vh;
      margin-top: 16px;
      font-size: 14px;
      color: rgb(202, 202, 202);
    }
  }
}
</style>
